<template>
    <div>
        frist:<input type="text" v-model.number="frist">
        last:<input type="text" v-model.number="last">
        <h3>
            {{ fullName }}
        </h3>
        <br> <hr>
        <!-- <input type="text" name="" id="" v-model> -->
        <h4>{{ he() }}</h4>
        <hr>
        <input type="text" v-model="msg">
        <h3>
            {{ returnMsg }} 
        </h3>
        <hr>
        <ul>
            <li v-for="(item,index) in arr" :key="index">
                {{ item }}
            </li>
        </ul>
        <h4>
            {{ zonghe }}
        </h4>
    </div>
</template>

<script>
export default {
    data(){
        return{
            frist:45,
            last:23,
            msg:'',
            arr:[4,5,6,4,7,8,9]
        }
    },
    computed:{
        zonghe(){
            return this.arr.reduce((item,prve)=>{
                return item+prve
            },0)
        },
        fullName(){
            return this.frist+this.last
        },
        returnMsg(){
            return this.msg.split('').reverse().join('')
        }
    },
    methods:{
        he(){
            return this.frist+this.last
        }
    }
}
</script>

<style>

</style>